<div class="row">
	<div class="col-xs-12">
		<div class="box">
			<div class="box-header">
				<h3 class="box-title">用户管理</h3>

				<div class="box-tools">
					<div class="input-group input-group-sm" style="width: 350px;">
						<input type="text" name="table_search" id="searchNameId"
							class="form-control pull-right" placeholder="用户名">

						<div class="input-group-btn">
							<button type="button" class="btn btn-default btn-search">
                                <i class="fa fa-search"></i>
							</button>
							<button type="button" class="btn btn-default btn-add">添加</button>
							<button type="button" class="btn btn-default btn-update">修改</button>
						</div>
					</div>
				</div>
			</div>
			<!-- /.box-header -->
			<div class="box-body table-responsive no-padding">
				<table class="table table-hover">
					<thead>
						<tr>
							<th>ID</th>
							<th>用户名</th>
							<th>所属商户</th>
							<th>邮箱</th>
							<th>手机号</th>
							<th>状态</th>
							<th>创建时间</th>
							<th>修改时间</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody id="tbodyId"></tbody>
				</table>
			</div>
			<div id="pageId" class="box-footer clearfix">
			</div>
			<!-- /.box-body -->
		</div>
		<!-- /.box -->
	</div>
</div>
<script type="text/javascript">
	$(document).ready(function(){
		$("#pageId").load("doPageUI",function(){
			doGetObjects();
		});
		$(".input-group-btn")
				.on("click",".btn-search",doQueryObjects)
				.on("click",".btn-add,.btn-update",doLoadEditUI);
		$("tbody").on("click",".btn-valid",doValidById);
	});

	function doLoadEditUI(){
		//1.判定点击的对象
		var title;
		if($(this).hasClass("btn-add")){
			title="添加用户";
			doLoadPage(title);
		}else if($(this).hasClass("btn-update")){
			title="修改用户";
			var id=doGetCheckedId();
			console.log("id="+id)
			if(!id){
				alert("请先选择");
				return;
			}
			//基于id进行查询并加载编辑页面
			doFindObjectById(id,title);
		}
	}
	function doFindObjectById(id,title){
		//1.params
		var params={"id":id};
		//2.url
		var url="user/doFindObjectById";
		//3.ajax request
		$.getJSON(url,params,function(result){//JsonResult
			if(result.state==1){
				$("#mainContentId").data("rowData",result.data);
				doLoadPage(title);
			}else{
				alert(result.message);
			}
		});
	}

	function doGetCheckedId(){
		return $("tbody input[name='radioId']:checked").val();
	}
	function doLoadPage(title){
		var url="user/user_edit"
		$("#mainContentId").load(url,function(){
			$(".box-title").html(title);
		})
	}
	//禁用和启用操作
	function doValidById(){
		//params
		var rowData=$(this).parents("tr").data("rowData");
		var id=rowData.id;
		var newValid=rowData.valid?0:1;
		var params={"id":rowData.id,"valid":newValid};
		//url
		var url="user/doValidById";
		//ajax request
		var btn=$(this);//获取点击的button对象
		$.post(url,params,function(result){
			if(result.state==1){
				//alert(result.message);
				//doGetObjects();//重新查询刷新
				//优化方式实现(局部刷新:修改button显示,修改td内容显示)
				doEditRow(btn,rowData.valid);
			}else{
				alert(result.message);
			}
		})
	}
	function doEditRow(obj,valid){
		//1.修改按钮上的内容
		$(obj).html(valid?"启用":"禁用");
		//2.修改tr中第5个td中的内容(查询API文档)
		var tr=$(obj).parents("tr");
		tr.find("td:eq(5)").text(valid?"禁用":"启用");
		//3.获取当前行tr对象，然后重新绑定新的值
		var rowData=tr.data("rowData")
		rowData.valid=valid?0:1;
		tr.data("rowData",rowData);
	}
	//处理查询按钮事件
	function doQueryObjects(){
		$("#pageId").data("pageCurrent",1);
		doGetObjects();
	}
	//页面加载完成异步加载当前页数据
	function doGetObjects(){

		debugger;
		var url="user/doFindPageObjects";
		var pageCurrent=$("#pageId").data("pageCurrent");
		if(!pageCurrent)pageCurrent=1;
		var params={"pageCurrent":pageCurrent}
		params.username=$("#searchNameId").val().trim();
		console.log(params);
		$.getJSON(url,params,function(result){
			console.log(result);
			doHandleResponseResult(result);
		});
	}
	function doHandleResponseResult(result){
		if(result.state==1){
			doSetTableBodyRows(result.data.records);
			doSetPagination(result.data);
		}else{
			alert(result.message);
		}
	}
	//通过服务端返回的数据初始化页面
	function doSetTableBodyRows(data){
		//1.获取tbody对象，并清空内容
		var tBody=$("#tbodyId");
		tBody.empty();
		//2.迭代data内容将数据追加到tbody中
		for(var i in data){
			var tr=$("<tr></tr>");
			tr.data("rowData",data[i]);
			var tds=doCreateTds(data[i]);
			tr.append(tds);
			tBody.append(tr);
		}
	}
	function doCreateTds(row){
		console.log(row);
		var tds="<td><input type='radio' name='radioId' value='"+row.id+"' ></td>"+
				"<td>"+row.username+"</td>"+
				"<td>"+(row.pxxDept?row.pxxDept.name:'未分配')+"</td>"+
				"<td>"+row.email+"</td>"+
				"<td>"+row.mobile+"</td>"+
				"<td>"+(row.valid?"启用":"禁用")+"</td>"+
				"<td>"+new Date(row.createdTime).toLocaleString()+"</td>"+
				"<td>"+new Date(row.modifiedTime).toLocaleString()+"</td>"+
				"<td><button type='button' class='btn btn-default btn-valid'>"+(row.valid?"禁用":"启用")+"</button></td>";
		return tds;
	}
</script>









